<template>
    <div>
        <div class="cell">提现金额（元）</div>
        <div class="enter">
            <span>¥</span><input
                v-model="money"
                ref="money"
                type="number"
                pattern="[0-9]*"
                onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'
        >
        </div>
        <div class="cell">
            <div class="can">可提现金额{{all}}元</div>
            <div
                    class="all"
                    @click="allMoney"
            >全部提现
            </div>
        </div>
        <!-- 银行卡提现 -->
        <!-- <div @click="toBankList" class="bank" v-if="defaultBank">
            <div class="left">
                {{bank}}({{showCard}})
            </div>
            <svg aria-hidden="true" class="right">
                <use xlink:href="#icon-chevronright"></use>
            </svg>
        </div>
        <div @click="toBank" class="bank" v-else>
            <div class="left">
                <svg class="icon yh" aria-hidden="true">
                    <use xlink:href="#icon-unionPay"></use>
                </svg>
                提现到银行卡
            </div>
            <svg aria-hidden="true" class="right">
                <use xlink:href="#icon-chevronright"></use>
            </svg>
        </div> -->
        <div
                @click="toBindWx"
                class="bank"
        >
            <div class="left">
                <svg
                        class="icon yh"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-WeChat"></use>
                </svg>
                提现到微信
            </div>
            <div class="right-con">
                <img
                        :src="wxInfo.info.avatar"
                        alt=""
                        v-if="wxInfo.yes"
                >
                <svg
                        aria-hidden="true"
                        class="right"
                >
                    <use xlink:href="#icon-chevronright"></use>
                </svg>
            </div>
        </div>
        <div
                class="all change"
                @click="changeWx"
                v-if="wxInfo.yes"
        >去换绑
        </div>
        <div
                @click="sure"
                class="sure"
        >确认提现
        </div>
        <password-popup
                ref="payPass"
                :amount="money | moneyFmt(2, '￥')"
                @finishPass="finishPass"
                @forget="setPass('5')"
        >
            <div
                    class="wx-info"
                    v-if="wxInfo.yes"
            >
                <img
                        :src="wxInfo.info.avatar"
                        alt=""
                >
                {{wxInfo.info.nickname}}
            </div>
        </password-popup>
        <pass-only
                ref="onlypass"
                @finishPass="finishPassOnly"
                @forget="setPass('5')"
                :text="bindText"
        ></pass-only>
    </div>
</template>

<script>
    import {baseUrl} from '../../config';
    import API from '../../request/api';
    import {Toast} from 'vant';
    import PasswordPopup from '../../components/common/password-popup.vue';
    import passOnly from '../../components/User/passOnly.vue';
    import {setTimeout} from 'timers';

    export default {
        components: {PasswordPopup, passOnly},
        data() {
            return {
                money: '',
                bank: '',
                cardId: '', // 银行卡id
                card: '',
                showCard: '',
                defaultBank: false,
                all: '',
                wxInfo: '',
                bindText: '您还没有绑定微信，确认安全密码后绑定'
            };
        },
        computed: {},
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        methods: {
            toBank() {
                this.$store.commit('forCertification', 'withdraw');
                this.$router.push('certification');
            },
            toBindWx() {
                if (!this.wxInfo.yes) {
                    if (this.defaultBank == false) {
                        this.$store.commit('forCertification', 'withdraw');
                        this.$router.push('certification');
                    } else {
                        this.$refs.onlypass.show();
                    }
                }
            },
            allMoney() {
                this.money = parseInt(this.all);
            },
            toBankList() {
                this.$router.push('bankList');
            },
            sure() {
                if (this.defaultBank == false) {
                    if (this.$store.state.login.platform !== '') {
                        this.$toast({
                            message: '请关注爱润妍技术部公众号，通过商城入口登录后进行提现操作',
                            duration: 1000
                        });
                    } else {
                        this.$store.commit('forCertification', 'withdraw');
                        this.$router.push('certification');
                    }
                } else if (!Number.isInteger(Number(this.money))) {
                    //   校验金额是否为正数
                    Toast('提现金额必须是整数');
                } else {
                    this.request.get(API.ExistsPayPass).then((res) => {
                        if (res.exists == 0) {
                            if (this.$store.state.login.platform !== '') {
                                this.$toast({
                                    message: '请关注爱润妍技术部公众号，通过商城入口登录后进行提现操作',
                                    duration: 1000
                                });
                            } else {
                                this.$store.commit('forCertification', 'withdraw');
                                this.$router.push({
                                    name: 'phone',
                                    query: {
                                        type: '6',
                                        direct: 'withDraw'
                                    }
                                });
                            }
                        } else {
                            if (!this.wxInfo.yes) {
                                this.$refs.onlypass.show();
                            } else {
                                if (this.money == '') {
                                    Toast('请先输入金额');
                                } else if (Number(this.money) < 100 || Number(this.money) > 2000) {
                                    this.$toast({
                                        message: '提现金额需在100~2000之间',
                                        duration: 1000
                                    });
                                } else if (this.$store.state.login.platform !== '') {
                                    this.$toast({
                                        message: '请关注爱润妍技术部公众号，通过商城入口登录后进行提现操作',
                                        duration: 1000
                                    });
                                } else {
                                    this.$refs.payPass.show();
                                }
                            }
                        }
                    }).catch((err) => {
                        this.$toast.fail(err);
                    });
                }
            },
            finishPass(val) {
                //    返回密码
                console.log(val, '撒大苏打实打实');
                //    发起提现借口
                let data = {
                    amount: this.money, // 金额
                    // bankcard: this.cardId, // 银行卡id
                    wechatid: this.wxInfo.info.id, // 银行卡id
                    paypass: val  // 密码
                };
                this.request.post(API.withdraw, data).then((res) => {
                    console.log(res, '咯卡死的卡萨丁尽快哈四大皆空');
                    Toast(res.message);
                    this.$router.push({
                        name: 'capital_steps',
                        query: {
                            type: 2, // 提现
                            title: res.message,
                            money: this.money
                        }
                    });
                });
            },
            finishPassOnly(pass) {
                this.request.post(API.bindVerify, {
                    pay_pass: pass
                }).then((res) => {
                    if (res.status) {
                        window.location.href = baseUrl + '/oauth2?scope=snsapi_userinfo';
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 1000
                        });
                    }
                }).catch((err) => {
                    console.error('bindVerify-err', err);
                });
            },
            setPass() { // 忘记密码
                this.$store.commit('forCertification', 'withdrawForget');
                this.$router.push({
                    name: 'phone',
                    query: {
                        type: '5',
                        direct: 'withDraw'
                    }
                });
            },
            getWxInfo() {
                this.request.get(API.getWxInfo)
                    .then((result) => {
                        console.log('getWxInfo', result);
                        this.wxInfo = result;
                    }).catch((err) => {
                    console.error('getWxInfo-err', err);
                });
            },
            changeWx() {
                // 换绑微信
                if (this.$store.state.login.platform !== '') {
                    this.$toast({
                        message: '请关注爱润妍技术部公众号，通过商城入口登录后进行提现操作',
                        duration: 1000
                    });
                } else {
                    this.bindText = '确认安全密码后换绑';
                    this.$refs.onlypass.show();
                }
            }
        },
        beforeCreate() {
            // 可以在这加个loading事件，在加载实例时触发
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
        },
        beforeMount() {
            // 相关的 render 函数首次被调用。
        },
        mounted() {
            this.$refs['money'].focus();
            setTimeout(() => {
                let bindWxInfo = this.$store.state.login.bindWxInfo;
                let query = this.$route.query;
                console.log('bindWxInfo----', bindWxInfo);
                if (bindWxInfo.token) {
                    console.log('Addwxinfo-this.$route.query', this.$route.query);
                    this.request.post(API.Addwxinfo, {
                        // openid: query.openid || bindWxInfo.openid,
                        // avatar: query.headimgurl || bindWxInfo.headimgurl,
                        // nickname: decodeURI(query.nickname || bindWxInfo.nickname),
                        token: decodeURI(query.token || bindWxInfo.token),
                    }).then((result) => {
                        console.log('Addwxinfo', result);
                        this.getWxInfo();
                    }).catch((err) => {
                        console.error('Addwxinfo-err', err);
                    });
                } else {
                    this.getWxInfo();
                }
            }, 500);
            this.request.get(API.getUserInfo).then((res) => {
                this.$store.commit('setUserInfo', res);
                if (res.certification == '0') {
                    this.defaultBank = false;
                } else {
                    this.defaultBank = true;
                }
            }).catch((err) => {
                console.error('getUserInfo-err', err);
            });
            this.request.post(API.userCapital).then(res => {
                this.all = res.balance;
            }).catch((err) => {
                console.error('userCapital-err', err);
            });

            // 挂载元素，获取到DOM节点
            // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl';

    input {
        width: 100%;
    }

    .enter {
        display: flex;
        font-size: word36;
        color: gray3;
        padding: cellPadding bigMargin;
        background-color: grayF;
        align-items: center;

        span {
            margin-right: middleMargin;
        }
    }

    .cell {
        cell();

        .can {
            color: gray9;
            font-size: word14;
        }
    }

    .all {
        color: main-color;
        font-size: word14;
        float: right;

        &.change {
            padding: vw(15);
        }
    }

    .bank {
        cell();
        align-items: center;
        background-color: grayF;
        margin-top: smallMargin;

        .left {
            display: flex;
            align-items: center;
        }

        .yh {
            width: vw(25);
            height: vw(25);
            margin-right: smallMargin;
        }

        .right-con {
            display: flex;
            align-items: center;

            img {
                width: vw(25);
                height: vw(25);
                margin-right: smallMargin;
                border-radius: all-radius;
            }
        }

        .right {
            arrow();
        }
    }

    .wx-info {
        flex-x(center);
        color: gray9;
        font-size: word12;
        line-height: vw(16);
        padding: vw(10);

        img {
            width: vw(25);
            height: vw(25);
            margin-right: smallMargin;
            border-radius: all-radius;
            border: 1px solid grayE;
        }
    }

    .sure {
        big-solid();
        margin: vw(50) auto;
    }
</style>
